{% extends "layout.html" %}
{% block body %}
<link rel="stylesheet" href="{{ url_for('static', filename='house/css/index.css') }}">

<div class="container mt-4">
    <div class="row">
        <div class="col-12 tj-header">
            <h3>{{ city }} 房源</h3>
            <div class="describe">
                <span>城市：{{ city }}，共约 {{ pagination.total if pagination else 0 }} 套房源</span>
                <span class="float-right">
                    <a href="{{ url_for('list.hot_house', page=1) }}" style="color:#3498db;">更多热点房源</a>
                </span>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        {% if houses %}
            {% for house in houses %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100">
                    <a href="/house/{{ house.id }}">
                        {% if house.image %}
                        <img class="card-img-top img-box" src="{{ url_for('static', filename='images/' ~ house.image) }}" alt="{{ house.address }}">
                        {% else %}
                        <img class="card-img-top img-box" src="{{ url_for('static', filename='img/house-bg1.jpg') }}" alt="{{ house.address }}">
                        {% endif %}
                    </a>
                    <div class="card-body">
                        <h5 class="card-title">{{ house.address }}</h5>
                        <p class="card-text">{{ house.rooms }} 室 · {{ house.area }} 平米</p>
                        <p class="card-text text-danger">￥{{ house.price }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="col-12">
                <p>当前没有房源。</p>
            </div>
        {% endif %}
    </div>

    <!-- 分页：使用后端提供的 page_range -->
    {% if pagination %}
    <nav aria-label="Page navigation">
      <ul class="pagination justify-content-center">
        <li class="page-item{% if not pagination.has_prev %} disabled{% endif %}">
          <a class="page-link" href="{{ url_for('list.city_house', city=city, page=1) }}" tabindex="-1">首页</a>
        </li>
        <li class="page-item{% if not pagination.has_prev %} disabled{% endif %}">
          <a class="page-link" href="{{ url_for('list.city_house', city=city, page=(pagination.page-1 if pagination.page>1 else 1)) }}">上一页</a>
        </li>

        {# 使用 page_range（由后端传入） #}
        {% for p in page_range %}
        <li class="page-item{% if p == pagination.page %} active{% endif %}">
          <a class="page-link" href="{{ url_for('list.city_house', city=city, page=p) }}">{{ p }}</a>
        </li>
        {% endfor %}

        <li class="page-item{% if not pagination.has_next %} disabled{% endif %}">
          <a class="page-link" href="{{ url_for('list.city_house', city=city, page=(pagination.page+1 if pagination.page < pagination.pages else pagination.pages)) }}">下一页</a>
        </li>
        <li class="page-item{% if pagination.page == pagination.pages %} disabled{% endif %}">
          <a class="page-link" href="{{ url_for('list.city_house', city=city, page=pagination.pages) }}">末页</a>
        </li>
      </ul>
    </nav>
    {% endif %}
</div>

{% endblock %}
